<!doctype html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1.0">
<title>和码编程</title>
<link rel=icon href="img/favicon.ico">
<link rel=stylesheet href=css/player.css>
<link rel=stylesheet href=css/index.css>

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/socket.io.js"></script>

<script>
  function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
    }
    return flag;
  }

  $(function(){
    if(IsPC()){
      console.log('pc端'+IsPC());
      //document.getElementsByTagName('body')[0].style.width = '480px';
      $('#player-area').css('width','480px').css('margin','0 auto');
      $('.panel-container').css('width','480px').css('margin','0 auto');
      $('.player').css('height',360+"px");
    }else{
      //document.getElementsByTagName('body')[0].style.width = document.body.offsetWidth + "px";
      $('#player-area').css('width','100%').css('margin','0 auto');
      $('.panel-container').css('width','100%').css('margin','0 auto');
      $('.player').css('height',360 * (document.body.offsetWidth/480) + "px");
      console.log('移动端'+IsPC());
    }
  });
</script>



<div class=area id=player-area>
<div class=player></div>
<div class=controls>
  <span class=stop></span>
  <span class=pause></span>
  <span class=flag title="Shift+click to enable turbo mode."></span>
  <div class=turbo>Turbo Mode</div>
  <span class=full-screen style="display:none;"></span>
</div>

<!-- <div class=operation-area>
  <div style="width:177px;height:164px;background-color:red;float: left;margin-top: 23px;margin-left: 27px;">

  </div>
  <div style="width:111px;height:111px;background-color:yellow;float: right;margin-right: 27px;margin-top: 54px;">

  </div>
</div> -->
<div class="panel-container">
  <div class="panel-left-4 key-4 f-fl" >
       <div class="key left arrow-left" ></div>
       <div class="key down arrow-down"></div>
       <div class="key right arrow-right" ></div>
       <div class="key up arrow-up" ></div>
  </div>
  <div class="space f-fr" ></div>
</div>

<div class=internal-error>
  An internal error occurred. <a id=error-bug-link target=_blank href=https://github.com/mittagskogel/sulfurous/issues/new>Click here</a> to file a bug report.
</div>
<div class=webgl-error>
  It looks like your device doesn't support WebGL. You can try viewing this project in the legacy player <a id=legacy-link target=_blank href=https://sulfurous.aau.at/legacy>here</a>.
</div>
</div>

<div class=title style="display:none;">
  <div class=progress-bar></div>
  <!-- <input class=url value=https://scratch.mit.edu/projects/> -->
  <input class=url value=http://localhost/subProg/projects/>
  <!-- <input class=url value=https://wx.wit-learn.com/subProg/projects/> -->
  <!-- <input class=url value=http://www.kwfuture.cn/subApps/resources/projects/> -->
  <a target=_blank class=project-link title="View project on Scratch"></a>
</div>

<div class=area id=project-area>
</div>

<script src=js/vconsole.min.js></script>
<script>
var vsconsole = new VConsole();
</script>

<script src=js/fonts.js></script>
<script src="js/jszip.js"></script>
<script src=js/gl-matrix-min.js></script>
<script src="js/util.js"></script>
<script src="js/IO.js"></script>
<script src="js/Base.js"></script>
<script src="js/Stage.js"></script>
<script src="js/Sprite.js"></script>
<script src="js/Costume.js"></script>
<script src="js/Sound.js"></script>
<script src="js/Watcher.js"></script>
<script src=js/phosphorus.js></script>
<script src=js/player.js></script>
<script src=js/shaders.js></script>
<script src=fonts/fonts.js></script>
<script src=js/socket.io.js></script>
<script>
  
  function move(operFlag,code){
    console.log('测试');  

    runtime.keysDown[code] = true;
    runtime.startKeyHats(code);
    
    setTimeout(function(){
        delete runtime.keysDown[code];
    }, 100);
  }

function getQueryString(proId){
     var reg = new RegExp("(^|&)"+ proId +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null) return  unescape(r[2]); 
     return null;
}

(function() {
  'use strict';

  //var prefix = 'https://scratch.mit.edu/projects/';
  var prefix = 'http://localhost/subProg/projects/';
  // var prefix = 'https://wx.wit-learn.com/subProg/projects/';
  //var prefix = 'http://www.kwfuture.cn/subApps/projects/';


  //var initialId = location.hash.substr(1);
  //f034de8c-d362-4f93-8dab-eec23905d2b5.sb2 69df83bfe400800f3a11275a8bd9f588.sb2 201810121449.sb2
  //a1835d811fbeec7e52fb8620f820951e.sb2 2daec54bfb10fe90a1d99ac9b868dae7.sb2 9ac4ec8b-0b3c-4184-be54-c05762e82d64.sb2
  //9f713fa5-9311-4303-a832-c3134caae785.sb2 28fe7d46-9447-47fb-b69e-fbc8fcabc482.sb2
  //73d59cf5b669176903708e0a3c8fa560.sb2 379a5952-86c6-444b-8951-d4f7eddf1c34.sb2
  //f3bcaa22-f38a-49cf-adbc-7495fecf1c34.sb2
  //var initialId = "d037099d-8d62-4dce-9eca-a59333df3ef0.sb2";
  var initialId = $.trim(getQueryString('proId'))+".sb2";

  if (initialId === 'zip') initialId = '';

  var titleArea = document.querySelector('#title-area');
  var playerArea = document.querySelector('#player-area');
  var projectArea = document.querySelector('#project-area');

  playerArea.style.height = projectArea.style.height = 'auto';
  //var titleAreaHeight = titleArea.offsetHeight;
  var playerAreaHeight = playerArea.offsetHeight;
  var projectAreaHeight = projectArea.offsetHeight;
  playerArea.style.height = projectArea.style.height = 0;

  //var examples = document.querySelector('#examples');
  var urlInput = document.querySelector('.url');
  urlInput.value = prefix + initialId;

  var progressBar = document.querySelector('.progress-bar');
  var player = document.querySelector('.player');
  var projectLink = document.querySelector('.project-link');
  //var bugLink = document.querySelector('#bug-link');

  var timeout;
  urlInput.addEventListener('input', function() {
    var ss = urlInput.selectionStart;
    var se = urlInput.selectionEnd;
    var url = urlInput.value;
    var id = url.match(/\d+/g) || [''];
    while (id.length > 1 && id.indexOf(P.player.projectId) > -1) {
      id.splice(id.indexOf(P.player.projectId), 1);
    }
    id = id[0];
    urlInput.value = url = prefix + id;
    urlInput.selectionStart = urlInput.selectionEnd = Math.max(prefix.length, ss);
    clearTimeout(timeout);
    if (P.player.projectId !== id) {
      timeout = setTimeout(function() {
        location.hash = '#' + id;
      }, 300);
    }
  });
  urlInput.addEventListener('focus', function() {
    setTimeout(function() {
      if (/\d/.test(urlInput.value)) {
        urlInput.select();
      }
    });
  });


  window.addEventListener('hashchange', function() {
    var id = location.hash.substr(1);
    if (id !== 'zip') {
      if (+id !== +id) id = '';
      urlInput.value = prefix + id;
    }
    load(id);
  });

  function show(id) {
    //titleArea.style.height = id ? 0 : titleAreaHeight + 'px';
    playerArea.style.height = id ? playerAreaHeight + 'px' : 0
    projectArea.style.height = id ? projectAreaHeight + 'px' : 0;
    if (!id) urlInput.focus();
  }

  function load(id) {
    if (id !== 'zip') {
      show(id);
    } else {
      id = '';
    }

    document.title = '和码编程';
    P.player.load(id, function(stage) {
      stage.triggerGreenFlag();
    }, function(title) {
      document.title = title ? title + ' \xb7 和码编程' : '和码编程';
      //updateBugLink();
    });

    projectLink.href = P.player.projectURL;
    //updateBugLink();
    //updatePackageLink();
   //updateEmbedCode();
  }

  function updateBugLink() {
    bugLink.href = P.player.projectId ? 'https://github.com/mittagskogel/sulfurous/issues/new?title=' + encodeURIComponent(P.player.projectTitle || P.player.projectURL) + '&body=' + encodeURIComponent('\n\n\n' + P.player.projectURL + '\nhttps://sulfurous.aau.at/#' + P.player.projectId + '\n' + navigator.userAgent) : 'https://github.com/mittagskogel/sulfurous/issues/new?body=' + encodeURIComponent('\n\n\n' + navigator.userAgent);
  }

  load(initialId);

  setTimeout(function() {
    function setTransition(el) {
      el.style.WebkitTransition =
      el.style.MozTransition =
      el.style.OTransition =
      el.style.transition = 'height 0.2s';
    }
    //setTransition(titleArea);
    setTransition(playerArea);
    setTransition(projectArea);
  });

  function cancel(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
  }
  document.body.addEventListener('dragover', cancel);
  document.body.addEventListener('dragenter', cancel);

  document.body.addEventListener('drop', function(e) {
    e.preventDefault();

    var f = e.dataTransfer.files[0];
	
	

    if (f) {
      location.hash = '#zip';
      show('zip');
      var ext = f.name.split('.').pop();
      if (ext === 'sb2' || ext === 'zip') {
        var request = P.IO.loadSB2File(f);
      } else if (ext === 'json') {
        request = P.IO.loadJSONFile(f);
      }
      if (request) {
        P.player.showProgress(request, function(stage) {
          stage.triggerGreenFlag();
        });
      }
    }
  });

}());

</script>